<script setup lang="ts">
import { ref,computed,onMounted  } from 'vue'
import GameBoard from './components/GameBoard.vue'
import MainMenu from './components/MainMenu.vue'
import RulesPage from './components/RulesPage.vue'
import SettingsPage from './components/SettingsPage.vue'

const currentView = ref('menu')

const currentViewComponent = computed(() => {
  switch (currentView.value) {
    case 'game': return GameBoard
    case 'rules': return RulesPage
    case 'settings': return SettingsPage
    default: return MainMenu
  }
})

function startGame() {
  // 切换到斗地主游戏界面
  currentView.value = 'game'
}

function goBackToMenu() {
  // 返回主页面
  currentView.value = 'menu'
}

function showRules() {
  // 导航到规则页面
  currentView.value = 'rules'
}

function showSettings() {
  // 导航到设置页面
  currentView.value = 'settings'
}

// 音乐控制
const bgm = ref<HTMLAudioElement | null>(null)
const musicSrc = '/audio/bg-music.mp3' // 推荐放 public 下

// 自动播放策略兼容
onMounted(() => {
  const el = bgm.value
  if (el) {
    el.volume = parseFloat(localStorage.getItem('bgmVolume') || '0.5')
    if (localStorage.getItem('bgmOn') !== 'false') {
      el.play().catch(() => {})
    } else {
      el.pause()
    }
  }
})


</script>

<template>
  <!-- <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1> -->
  <transition name="fade" mode="out-in">
    <component
      :is="currentViewComponent"
      @start="startGame"
      @rules="showRules"
      @settings="showSettings"
      @back="goBackToMenu"
      @backToMenu="goBackToMenu"
    />
  </transition>
   <!-- 背景音乐 -->
    <audio ref="bgm" :src="musicSrc" loop autoplay hidden />
</template>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s ease;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}

.logo.electron:hover {
  filter: drop-shadow(0 0 2em #9FEAF9);
}

.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}

.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
